<template>
  <div class="selectImg">
    <draggable v-model="config.imageList" class="selectImg-drag" @end="moveListSort">
      <template #item="{element, index}">
        <div class="selectImg-center" :style="{'width': width*rate + 'px', 'height': height*rate + 'px'}"
             v-on:click="chooseImage(index)">
          <img :src="element.url" v-if="element.url">
          <i class="el-icon-picture" v-else></i>
          <div class="close el-icon-error" v-if="(initMultiple && showClose) || (!initMultiple && element.url && showClose)" v-on:click="onClear(index, $event)"></div>
        </div>
      </template>
    </draggable>
    <div class="selectImg-center add el-icon-plus" :style="{'width': width*rate + 'px', 'height': height*rate + 'px'}"
         v-if="initMultiple" v-on:click="addImage ();chooseImage(config.imageList.length-1)"></div>
<!--    <div class="selectImg-info" v-if="cropper">建议尺寸：{{ width }}px * {{ height }}px</div>-->
    <ImgLibDialog ref="imgLibDialog" :width="width" :height="height" v-on:onSelect="onSelect"></ImgLibDialog>
  </div>
</template>

<script>

import draggable from 'vuedraggable'
import ImgLibDialog from './ImgLibDialog.vue'
import {getCurrentInstance, ref, reactive, onUpdated} from 'vue';

export default {
  components: {
    ImgLibDialog,
    draggable
  },
  props: {
    modelValue: Object | String,
    width: {type: Number, default: 100},
    height: {type: Number, default: 100},
    url: {type: String, default: null},
    multiple: {type: Boolean, default: false},
    showClose: {type: Boolean, default: true},
    rate: {type: Number, default: 1},
    maxLength: {type: Number, default: 5}
  },
  data() {
    return {
    }
  },
  mounted() {
  },
  setup (props, that) {
    const initMultiple = ref(props.multiple)
    const config = reactive({
      imageList: initMultiple.value?(props.modelValue||[]):[]
    })
    onUpdated(function () {
      onLoad()
    })
    const {proxy} = getCurrentInstance()
    const chooseImage = function (index) {
      proxy.$refs.imgLibDialog.open({
        index: index
      })
    }
    const onSelect = function (e) {
      config.imageList[e.index].id = e.id
      config.imageList[e.index].url = e.url
      if (initMultiple.value) {
        that.emit("update:modelValue", config.imageList)
      } else {
        that.emit("update:modelValue", e.id)
        that.emit("update:url", e.url)
      }
    }
    const onClear = function (index, e) {
      config.imageList.splice(index, 1)
      if(!initMultiple.value) {
        addImage({
          id: null,
          url: null
        });
        that.emit("update:modelValue", null);
      } else {
        that.emit("update:modelValue", config.imageList);
      }
      e.stopPropagation()
    }
    const addImage = function (img) {
      config.imageList.push(Object.assign({
        id: null,
        url: null
      }, img))
    }
    const moveListSort = function (e) {
      let img = JSON.parse(JSON.stringify(config.imageList[e.oldIndex]))
      config.imageList.splice(e.oldIndex, 1)
      config.imageList.splice(e.newIndex, 0, img)
    }
    const onLoad = function () {
      if (!initMultiple.value) {
        if (config.imageList.length <= 0) {
          addImage({
            id: props.modelValue,
            url: props.url
          })
        } else {
          config.imageList[0] = {
            id: props.modelValue || config.imageList[0].id,
            url: config.imageList[0].url || props.url,
          }
        }
      } else {
        config.imageList = props.modelValue || []
      }
    }
    onLoad()
    return {chooseImage, onSelect, onClear, initMultiple, addImage, config, moveListSort}
  },
  methods: {
  },
  watch: {}
}
</script>
<style scoped lang="scss">
.selectImg{
  display: flex;
  flex-flow: wrap row;
  width: 100%;

  .selectImg-drag{
    display: flex;
    flex-flow: wrap row;
  }
  .selectImg-center {
    border: 1px dashed var(--border-bb);
    border-radius: var(--round);
    cursor: pointer;
    position: relative;
    width: 100px;
    height: 100px;
    overflow: hidden;
    margin-right: 10px;
    margin-bottom: 10px;

    &.add{
      font-size: 20px;
      color: var(--font-hd);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    img {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    &:hover {
      .close {
        display: block;
      }
    }

    .close {
      width: 15px;
      text-align: center;
      height: 15px;
      line-height: 15px;
      color: var(--danger);
      position: absolute;
      top: 0px;
      right: 0px;
      display: none;
    }
  }
}

.selectImg-center:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.selectImg-center i {
  color: var(--font-hc);
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.selectImg-info {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  color: var(--danger);
  text-align: left;
}
</style>
